@extends('layouts.console_main')
@section('resources')
    @parent
    <style type="text/css">
        #container{ width:90%; height: 500px;}
        tfoot{background:lightblue;}
    </style>
@endsection
@section('content')
    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h2>数据管理  >>  肿瘤医院 >> 水表比较 </h2>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="row">
              <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>水表一</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <!-- <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul> -->
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <br />
                    <form class="form-horizontal form-label-left">
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">名称：</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                          <select class="form-control" name="water_meter_id1">
                            <option value="0">--请选择水表--</option>
                            @foreach($water_meter_lists as $list)
                            <option value="{{$list['id']}}">{{$list['name']}}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-3">时间：</label>
                        <div class="col-md-9 col-sm-9 col-xs-9">
                          <input type="date" class="form-control" name="water_meter_time1">
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            
              <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>水表二</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                       <!--  <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul> -->
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <br />
                    <form class="form-horizontal form-label-left">
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">名称：</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                          <select class="form-control" name="water_meter_id2">
                           <option value="0">--请选择水表--</option>
                            @foreach($water_meter_lists as $list)
                            <option value="{{$list['id']}}">{{$list['name']}}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-3">时间：</label>
                        <div class="col-md-9 col-sm-9 col-xs-9">
                          <input type="date" class="form-control" name="water_meter_time2">
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
               </div>
                <div class="clearfix"></div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-1">
                                    <button class="btn btn-primary" type="button" id="submit_comparison">生成比较结果</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="clearfix"></div>
                <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2 id="water_meter_name1"></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <!-- <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul> -->
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="table-responsive">
                        <table id="datatable1" class="table table-striped table-bordered">
                            <tr>
                                <td>时间</td>
                                <td>编号</td>
                                <td>名称</td>
                                <td>企业名称</td>
                                <td>使用量</td>
                            </tr>
                        </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2 id="water_meter_name2"></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                       <!--  <ul class="dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul> -->
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                   <div class="table-responsive">
                        <table id="datatable2" class="table table-striped table-bordered">
                            <tr>
                                <td>时间</td>
                                <td>编号</td>
                                <td>名称</td>
                                <td>企业名称</td>
                                <td>使用量</td>
                            </tr>
                        
                        </table>
                    </div>
                  </div>
                </div>
               </div>
                 <div class="clearfix"></div>

            <!--
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>子节点在 <span id="show_date_2" style="color: red;">{{date('Y-m-d')}}</span> 用水情况</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="table-responsive">
                                <table id="datatable" class="table table-striped table-bordered">
                                    <thead>
                                    <tr>
                                        <td>编号</td>
                                        <td>名称</td>
                                        <td>使用量</td>
                                        <td>状态</td>
                                    </tr>
                                    </thead>
                                    <tbody id="child_tbody">

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td>编号</td>
                                        <td>名称</td>
                                        <td>使用量</td>
                                        <td>状态</td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                -->

            </div>
        </div>
    </div>


@endsection
@section('scriptResources')
    @parent
    <script>
       $("#submit_comparison").click(function() {
            var water_meter_id1 = $("select[name='water_meter_id1']").find("option:selected").val();
            var water_meter_time1 = $("input[name='water_meter_time1']").val();
            var water_meter_id2 = $("select[name='water_meter_id2']").find("option:selected").val();
            var water_meter_time2 = $("input[name='water_meter_time2']").val();
            $.ajax({
                url: '/data/two_water_meter/comparison',
                data: {
                    water_meter_id1: water_meter_id1,
                    water_meter_time1: water_meter_time1,
                    water_meter_id2: water_meter_id2,
                    water_meter_time2: water_meter_time2
                },
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    if (data.status == 'success') {
                        var data = data.data;
                        var name1 = data.name1;
                        var name2 = data.name2;
                        var enterprise_name1 = data.enterprise_name1;
                        var enterprise_name2 = data.enterprise_name2;
                        var number1 = data.number1;
                        var number2 = data.number2;
                        var radix_list1 = data.radix_list1;
                        var radix_list2 = data.radix_list2;
                        var tmp1 = 0;
                        var tmp2 = 0;
                        var table_html1 = '';
                        var table_html2 = '';
                        for(var i=0; i<radix_list1.length; i++) {
                            if(i == 0) {
                                table_html1 += "<tr><td>"+radix_list1[i]['created_at']+"</td><td>" + number1 + "</td><td>" + name1 +"</td><td>" + enterprise_name1 + "</td><td>  </td></tr>";
                            } else {
                                table_html1 += "<tr><td>"+radix_list1[i]['created_at']+"</td><td>" + number1 + "</td><td>" + name1 +"</td><td>" + enterprise_name1 + "</td><td>" + (radix_list1[i]['radix'] - tmp1).toFixed(2) + "</td></tr>";
                            }
                            tmp1 = radix_list1[i]['radix'];
                        }
                        for(var j=0; j<radix_list2.length; j++) {
                             if(j == 0) {
                                table_html2 += "<tr><td>"+radix_list2[j]['created_at']+"</td><td>" + number2 + "</td><td>" + name2 +"</td><td>" + enterprise_name2 + "</td><td> </td></tr>";
                             } else {
                                table_html2 += "<tr><td>"+radix_list2[j]['created_at']+"</td><td>" + number2 + "</td><td>" + name2 +"</td><td>" + enterprise_name2 + "</td><td>" + (radix_list2[j]['radix'] - tmp2).toFixed(2) + "</td></tr>";
                             }
                             tmp2 = radix_list2[j]['radix'];
                        }
                        $("#datatable1").append(table_html1);
                        $("#datatable2").append(table_html2);
                        $("#water_meter_name1").html(name1);
                        $("#water_meter_name2").html(name2);
                    } else {
                        alert(data.message);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                }
            });
            
       }) 
    </script>
@endsection

